import React from 'react'
import './index.less'
import Weather from '@/api/weather-api.js'
import LinkA from '@/components/publics/LinkA.jsx'
import { Modal } from 'antd'
import { withRouter } from 'react-router-dom'
import Time from './time'
import { connect } from 'react-redux'
const { confirm } = Modal
@connect(
  (state) => ({ user: state.user, title: state.title }),
  (dispatch) => ({
    setUser: (user) => dispatch({ type: 'setUser', data: user }),
    clearUser: () => dispatch({ type: 'clear' }),
  })
)
class top extends React.Component {
  state = {
    weatherInfo: {},
  }
  //获取栏目标题
  getNavTitle() {
    stop: for (let v of this.props.menus) {
      if (v.path === this.props.location.pathname) {
        return v.title
      } else if (v.children) {
        for (let vc of v.children) {
          if (this.props.location.pathname.indexOf(vc.path) !== -1) {
            return vc.title
            break stop
          }
        }
      }
    }
  }

  componentDidMount() {
    //动态获取天气信息
    Weather('恩施').then((v) => {
      this.setState({
        weatherInfo: v,
      })
    })
    //this.frushTime()
  }
  //退出登录，穿入的是一个函数
  logout = () => {
    const self = this
    confirm({
      title: '注销登录',
      content: '您确认要退出并注销账户吗？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        self.props.clearUser()
        self.props.history.replace('/login')
      },
      onCancel() {},
    })
  }
  render() {
    return (
      <header className="header">
        <div className="user-info">
          <span className="header-user">欢迎，{this.props.user.username}</span>
          <LinkA
            className="header-logout"
            onClickLink={this.logout}
            title="退出"
          ></LinkA>
        </div>
        <div className="header-bottom">
          <div className="header-nav">{this.props.title}</div>
          <div className="date-weather">
            <Time />
            <img src={this.state.weatherInfo.dayPictureUrl} />
            <span>{this.state.weatherInfo.weather}</span>
          </div>
        </div>
      </header>
    )
  }
}
export default withRouter(top)
